<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/prototype.js" type="text/javascript"></script>
		<script src="js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
		<script src="js/functions.js" type="text/javascript"></script>

        <!-- COLOR PICKER START -->
        <script type="text/javascript" language="javascript" src="includes/color-picker/js/colorPicker.js"></script>
        <link rel="stylesheet" href="includes/color-picker/css/colorPicker.css" type="text/css" />
        <!-- COLOR PICKER END -->

		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<title>Frases</title>
    </head>
    <body>
        <h1>Cuál es tu frase?</h1>
		<h2>Descubrila ahora!</h2>
		<br />

        <div id="testCorner" class="dataBlock">
            <span class="fieldTitle">Cuál es tu nombre?</span>
            <input type="text" id="name" name="name" class="textBox" title="Nombre" value="" onchange="getPhrasePart(this.name, this.value)" /><br />
        </div>

        <div class="dataBlock">
            <span class="fieldTitle">Cuándo naciste?</span>
            <select id="day" name="day" class="smallSelect" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    for($i=1; $i<=31; $i++){
                        echo "\t\t\t<option value='$i'>$i</option>\n";
                    }
                ?>
            </select>
            <select id="month" name="month" class="smallSelect" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    for($i=1; $i<=12; $i++){
                        echo "\t\t\t<option value='$i'>$i</option>\n";
                    }
                ?>
            </select>
            <select id="year" name="year" class="smallSelect" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    $actualYear = date("Y");
                    for($i=1964; $i<$actualYear; $i++){
                        echo "\t\t\t<option value='$i'>$i</option>\n";
                    }
                ?>
            </select>
        </div>
			
        <div class="dataBlock">
            <span class="fieldTitle">Qué especialidad te representa mejor?</span>
            <select id="especialidad" name="especialidad" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    //TODO: get from database
                    include('includes/input/professionMappings.php');
                    foreach($profession as $key => $value){
                        $value = ucwords($value);
                        echo "\t\t\t<option value='$key'>$value</option>\n";
                    }
                ?>
            </select>
        </div>
		
        <div class="dataBlock">
            <span class="fieldTitle">Elegí un deporte:</span>
            <select id="deporte" name="deporte" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    //TODO: get from database
                    include('includes/input/sportMappings.php');
                    foreach($sport as $key => $value){
                        $value = ucwords($value);
                        echo "\t\t\t<option value='$key'>$value</option>\n";
                    }
                ?>
            </select>
        </div>
		
        <div class="dataBlock">
            <span class="fieldTitle">Elegí un género musical:</span>
            <select id="musica" name="musica" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    //TODO: get from database
                    include('includes/input/musicgenreMappings.php');
                    foreach($musicgenre as $key => $value){
                        $value = ucwords($value);
                        echo "\t\t\t<option value='$key'>$value</option>\n";
                    }
                ?>
            </select>
        </div>
		
        <div class="dataBlock">
            <span class="fieldTitle">Elegí un color:</span>
            <select id="color" name="color" onchange="getPhrasePart(this.name, this.value)">
                <option value=''>---</option>
                <?php
                    //TODO: get from database
                    include('includes/input/colorMappings.php');
                    foreach($color as $key => $value){
                        $value = ucwords($value);
                        echo "\t\t\t<option value='$key'>$value</option>\n";
                    }
                ?>
            </select>
            <!-- <input id="color" name="color" type="text" onclick="handleColorPicker(this)" onchange="getPhrasePart(this.name, this.value)" /> -->
        </div>


             

        <!--------------------------------------------------------------------->
        <div id="phraseTitle">Tu frase es...</div>
        <div id="phraseContainer">
            <div class="phraseBlock">
                <span id="phrase_name" class="phrasePart"></span>
                <span id="phrase_day" class="phrasePart"></span>
                <span id="phrase_month" class="phrasePart"></span>
                <span id="phrase_year" class="phrasePart"></span>
                <span id="phrase_pais" class="phrasePart"></span>
                <span id="phrase_especialidad" class="phrasePart"></span>
                <span id="phrase_deporte" class="phrasePart"></span>
                <span id="phrase_musica" class="phrasePart"></span>
                <span id="phrase_color" class="phrasePart"></span>

                <br />
                <span id="autor" class="phrasePart"></span>
            </div>
        </div>
        <!--------------------------------------------------------------------->


        <script>
            //round borders of dataBlock divs
            $$('div[class="dataBlock"]').each(function(obj){ new Effect.Corner(obj, "5px"); })

            //round corners for phrase result div
            new Effect.Corner($('phraseContainer'), "5px");
        </script>
    </body>
</html>